<template>
  <div class="top">
    <div class="title">
      <img class="t" src="../assets/img/homepage/标题1.png" alt="" />
    </div>
    <div>
      <el-card class="card1" :body-style="{ padding: '0' }">
        <img src="../assets/img/homepage/cardimg1.png" alt="" />
        <span class="cardTitle">校园二手</span><br />
        <span class="cardContext">带不走的东西，丢不掉的记忆</span><br />
        <span class="cardContext">让我，帮它找到新的主人</span><br />
        <div class="wrapper" @click="toGooditem">
          <a><span>校园二手</span></a>
        </div>
      </el-card>
      <el-card class="card2" :body-style="{ padding: '0' }">
        <img src="../assets/img/homepage/cardimg2.jpg" alt="" />
        <span class="cardTitle">校园求购</span><br />
        <span class="cardContext">众里寻它，蓦然回首</span><br />
        <span class="cardContext">原来它就在这里</span><br />
        <div class="wrapper" @click="toAsktobuy">
          <a><span>校园求购</span></a>
        </div>
      </el-card>
      <el-card class="card3" :body-style="{ padding: '0' }">
        <img src="../assets/img/homepage/cardimg3.jpg" alt="" />
        <span class="cardTitle">加入我们</span><br />
        <span class="cardContext">年华已去，梦想犹在</span><br />
        <span class="cardContext">入驻我们，或获得属于你的平台</span><br />
        <div class="wrapper" @click="toLogin">
          <a><span>加入我们</span></a>
        </div>
      </el-card>
    </div>
  </div>
  <div class="placeholder">
    <br /><br /><br /><br /><br />
  </div>
  <div class="characteristic">
    <div class="c11">
      <img src="../assets/img/homepage/安全.png" alt="" />
      <div class="c21">
        <h2>安全</h2>
        <span>当面沟通，信息对称，确保安全。</span>
      </div>
    </div>
    <div class="c12">
      <img src="../assets/img/homepage/快捷.png" alt="" />
      <div class="c22">
        <h2>快捷</h2>
        <span>同校交易，省去物流，不用等待。</span>
      </div>
    </div>
    <div class="c13">
      <img src="../assets/img/homepage/简单.png" alt="" />
      <div class="c23">
        <h2>简单</h2>
        <span>简单注册，简洁发布，一键到底。</span>
      </div>
    </div>
    <div class="c14">
      <img src="../assets/img/homepage/方便.png" alt="" />
      <div class="c24">
        <h2>方便</h2>
        <span>PC＋APP，分类明晰，快速搜索。</span>
      </div>
    </div>
  </div>
  <div class="about">
    <span class="a1">关于我们</span><br />
    <span class="a2">年华已去，梦想犹在，为了不一样的青春</span>
  </div>
  <Footer></Footer>
</template>

<script setup lang="ts">
import Footer from '../components/footer.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

async function toGooditem() {
  await router.push('/items')
}
async function toAsktobuy() {
  await router.push('/demand')
}
async function toLogin() {
  await router.push('/auth/frame')
}
</script>

<style lang="less" scoped>
.top {
  background-image: url('../assets/img/homepage/classroom1.jpg');
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  .el-card {
    display: inline-block;
    width: 400px;
    height: 300px;
    position: relative;
    top: 70%;
  }
  .title {
    position: absolute;
    .t {
      position: absolute;
      top: 50px;
      left: -370px;
    }
  }
}
.card1,
.card2,
.card3 {
  text-align: center;
  transition: all 0.5s;
  background: whitesmoke;
  img {
    width: 129%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.5s;
  }
  .cardTitle {
    font-size: 30px;
    margin-bottom: 15 px;
    font-weight: 400;
    position: relative;
    top: 40px;
    color: #333;
  }
  .cardContext {
    font-size: 18px;
    margin-bottom: 15 px;
    font-weight: 400;
    position: relative;
    top: 60px;
    color: #333;
  }
  .wrapper {
    position: relative;
    left: 330px;
    top: 120px;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
  a {
    display: block;
    width: 130px;
    height: 30px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 500;
    font-family: sans-serif;
    text-decoration: none;
    color: #333;
    border: 2px solid #333;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    transition: all 0.35s;
  }
  a span {
    position: relative;
    bottom: 5px;
    z-index: 2;
  }
  a:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #eb9839;
    opacity: 0.5;
    transition: all 0.35s;
  }
  a:hover {
    color: #fff;
  }
  a:hover:after {
    width: 100%;
  }
}
.card2 {
  a:after {
    background: #3995eb;
  }
}
.card3 {
  a:after {
    background: #32e49a;
  }
}

.card1:hover,
.card2:hover,
.card3:hover {
  .cardTitle,
  .cardContext,
  span {
    color: whitesmoke;
  }
  a {
    border: 2px solid rgba(65, 63, 63, 0.493);
  }
  img {
    opacity: 1;
    transform: translate(-100px, 0);
  }
}

.characteristic {
  img {
    width: 100px;
  }
  div {
    width: 49%;
  }
  .c21,
  .c22,
  .c23,
  .c24 {
    display: inline-block;
    position: relative;
    top: -15px;
    left: 25px;
  }
  .c11,
  .c12,
  .c13,
  .c14 {
    float: left;
    position: relative;
    left: 13.5%;
  }
  .c13,
  .c14 {
    top: 30px;
  }
}

.characteristic:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.about {
  text-align: center;
  position: relative;
  top: 150px;
  .a1 {
    font-size: 45px;
    font-weight: 400;
  }
  .a2 {
    font-size: 25px;
    font-weight: 400;
    color: #888;
    position: relative;
    top: 20px;
  }
}

.placeholder {
  width: 100%;
  height: 40%;
}
</style>
